<template>
	<view class="p-l-40 p-r-40 p-t-40">
		<uni-forms ref="form" :label-width='90' :rules="rules" :modelValue="form">
			<uni-forms-item label="用户" name="username">
				<uni-easyinput type="text" v-model="form.username" disabled placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput type="number" v-model="form.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email">
				<uni-easyinput type="text" v-model="form.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item label="头像上传">
				
					<htzImageUpload :headers="{
						Authorization:token
					}" :uploadSuccess="zidingyiSuccess" :max='1'  @imgDelete='imagesDelete' :action='$http.config.baseURL+"/upload"' :value="avatar" ></htzImageUpload>
			</uni-forms-item>

		</uni-forms>

		<button class="m-t-100" type="primary" @click="postForm">提交</button>
	</view>
</template>

<script>
	
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {baseurl} from '@/config.js'
	export default {
		components: {
			htzImageUpload
		},
		data() {
			return {
				token: uni.getStorageSync('token'),
				form: {
					username: "",
					email: '',
					phone: '',
					avatar:null
				},
				avatar:[],
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								var reg = new RegExp("^1[3578]\\d{9}$");
								if (!reg.test(value)) {
									callback('请输入正确手机格式')
								}
								return true
							}
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						},{
							validateFunction: function(rule, value, data, callback) {
								var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
								if (!reg.test(value)) {
									callback('请输入正确邮箱格式')
								}
								return true
							}
						}]
					},
					newPwd2: {
						rules: [{
							required: true,
							errorMessage: '请输入并与新密码保持一致',
						}]
					}

				}

			}
		},
		onLoad() {
			this.$http.get('/user/userinfo').then(res=>{
				this.form = res.data
				if(typeof(res.data.avatar)=='string'){
					this.avatar.push(res.data.avatar)
				}
			})
		},
		methods: {
			postForm() {
				this.$refs.form.validate().then(res => {
					let obj = {
						
					}
					if(this.avatar.length>0){
						obj.avatar = this.avatar[0]
					}
					this.$http.post('/user/updateuserinfo',Object.assign(this.form,obj)).then(res => {
						uni.showToast({
							title: res.message,
							icon:'none',
							success() {
								let time = setTimeout(function() {
									uni.navigateBack()
									clearTimeout(time)
								}, 1500)
							}
						})
					})
				})
			},
			zidingyiSuccess(e){
				let res = JSON.parse(e.data)
			  if(res.code ===200){
				  return{
					  success:true,
					  url:res.data.url
				  }
			  }else{
				  return{
					  success:false,
					  url:""
				  }
			  }
			},
			imagesDelete(e){
				this.form.avatar = null
				this.avatar = e.tempFilePaths
			},

		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>
